<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>司法计算系统v1.0</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<div>
    <p>计算模式一：</p>
    基准价格：<input id="num1">
    基本服务费：<input id="num2">
    额外服务费：<input id="num3">
    <button id="btn1">计算总人数</button>
    总服务费：<input id="num4">
</div>

<script>
    $("#btn1").on("click",function(){
        var num1 = $("#num1").val();
        var num2 = $("#num2").val();
        var num3 = $("#num3").val();
        var num4 = Number(num1)+Number(num2)+Number(num3);
        $("#num4").val(num4);
    });
</script>
<div>
    <p>计算模式二：</p>
    基准价格：<input id="anum1">
    基本服务费：<input id="anum2">
    额外服务费：<input id="anum3">
    <button id="abtn1">计算总人数</button>
    总服务费：<input id="anum4">
</div>

<script>
    $("#abtn1").on("click",function(){
        var anum1 = $("#anum1").val();
        var anum2 = $("#anum2").val();
        var anum3 = $("#anum3").val();
        var anum4 = Number(anum1)+Number(anum2)+Number(anum3);
        $("#anum4").val(anum4);
    });
</script>
</body>
</html>